import { useState } from 'react'
import style from './style.module.scss'
import Bottom from '../../components/bottom'
import { Popup } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { RightOutline, GlobalOutline, UserCircleOutline, SetOutline, QuestionCircleOutline } from 'antd-mobile-icons'

const { userbox, idbox, aiadd, mesBox, outBox, delbox, bottomp, btn1 } = style
const User = () => {
  const [height, setHeight] = useState(64)
  const [visible1, setVisible1] = useState(false)
  const navigate = useNavigate()
  const handlerout = () => {
    sessionStorage.removeItem('userid')
    sessionStorage.removeItem('token')
    navigate('/')
  }
  return <div onWheel={(e) => {
    if (e.deltaY > 0) {
      setHeight(0)
    } else {
      setHeight(64)
    }
  }}>

    <div className={userbox}>
      <h1>个人资料</h1>
      <div className={idbox}>
        <img src="https://z1.muscache.cn/im/pictures/user/016e8820-9b1a-40d0-b90b-c0b5ffe1d418.jpg?aki_policy=profile_x_medium" alt="" />
        <section>
          <p>猪猪笨笨p</p>
          <p style={{ fontSize: '14px', color: '#999' }}>显示个人资料</p>
        </section>
        <RightOutline fontSize={20} />
      </div>
      <div>
        <hr />
        <div className={aiadd}>
          <section>
            <p><b>来爱彼迎当房东</b></p>
            <p style={{ fontSize: '14px', color: '#999' }}>简单上手，轻松赚钱</p>
          </section>
          <img src="https://a0.muscache.com/pictures/b0021c55-05a2-4449-998a-5593567220f7.jpg" alt="" />
        </div>
        <div className={mesBox}>
          <UserCircleOutline fontSize={30} />
          <p>个人信息</p>
          <RightOutline fontSize={20} />
        </div>
        <div className={mesBox}>
          
          <SetOutline fontSize={30} />
          <p>账号</p>
          <RightOutline fontSize={20} />
        </div>
      </div>
      <div>
        <hr />
        <h2>出租/开展体验</h2>
        <div className={mesBox}>
        <div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style={{display:'block',height:'24px',width:'24px',fill:'currentColor'}} aria-hidden="true" role="presentation" focusable="false"><path d="M24 31a7 7 0 0 0 0-14H8a7 7 0 0 0 0 14zm5-7a5 5 0 1 1-5-5 5 5 0 0 1 5 5zM3 24a5 5 0 0 1 5-5h11.11a6.98 6.98 0 0 0 0 10H8a5 5 0 0 1-5-5zM24 1H8a7 7 0 0 0 0 14h16a7 7 0 0 0 0-14zM3 8a5 5 0 1 1 5 5 5 5 0 0 1-5-5zm21 5H12.89a6.98 6.98 0 0 0 0-10H24a5 5 0 0 1 0 10z"></path></svg></div>
          <p>出租房源</p>
          <RightOutline fontSize={20} />
        </div>

      </div>
      <div>
        <hr />
        <h2>好友邀请和旅行基金</h2>

        <div className={mesBox}>
        <div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style={{display:'block',height:'24px',width:'24px',fill:'currentColor' }}aria-hidden="true" role="presentation" focusable="false"><path d="M29 5a2 2 0 0 1 2 1.85V25a2 2 0 0 1-1.85 2H3a2 2 0 0 1-2-1.85V7a2 2 0 0 1 1.85-2H3zM13.59 17H3v8h12v-6.59l-4.3 4.3-1.4-1.42zM29 17H18.41l4.3 4.3-1.42 1.4L17 18.42V25h12zM15 7H3v8h4.54a4 4 0 0 1 6.28-4.84c.29.28.68.85 1.18 1.74zm6 4c-.53 0-.98.17-1.42.6-.21.2-.63.87-1.22 1.98l-.25.47-.5.95H21a2 2 0 0 0 1.98-1.7l.01-.15L23 13a2 2 0 0 0-2-2zm8-4H17v4.9c.47-.82.83-1.37 1.12-1.67l.06-.07A4 4 0 0 1 24.46 15H29zm-18 4a2 2 0 0 0-2 2v.15A2 2 0 0 0 11 15h3.38l-.49-.95-.36-.69c-.54-.98-.91-1.58-1.1-1.76-.45-.43-.9-.6-1.43-.6z"></path></svg></div>
          <p>邀请房东</p>
          <RightOutline fontSize={20} />
        </div>

      </div>
      <div>
        <hr />
        <h2>用户支持</h2>

        <div className={mesBox}>
          <div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{display: 'block', height: '24px', width: '24px', fill: 'currentcolor'}}><path d="M16 1c2 0 3.46.96 4.75 3.27l.53 1.02a424.58 424.58 0 0 1 7.1 14.84l.15.35c.67 1.6.9 2.48.96 3.4v.41l.01.23c0 4.06-2.88 6.48-6.36 6.48-2.22 0-4.55-1.26-6.7-3.39l-.26-.26-.17-.17h-.02l-.17.18c-2.05 2.1-4.27 3.42-6.42 3.62l-.28.01-.26.01c-3.48 0-6.36-2.42-6.36-6.48v-.47c.03-.93.23-1.77.83-3.24l.22-.53c.97-2.3 6.08-12.98 7.7-16.03C12.55 1.96 14 1 16 1zm0 2c-1.24 0-2.05.54-2.99 2.21l-.52 1a422.57 422.57 0 0 0-7.03 14.7l-.35.84a6.86 6.86 0 0 0-.6 2.24l-.01.33v.2C4.5 27.4 6.41 29 8.86 29c1.77 0 3.87-1.24 5.83-3.35-2.3-2.94-3.86-6.45-3.86-8.91 0-2.92 1.94-5.39 5.18-5.42 3.22.03 5.16 2.5 5.16 5.42 0 2.45-1.56 5.96-3.86 8.9 1.97 2.13 4.06 3.36 5.83 3.36 2.45 0 4.36-1.6 4.36-4.48v-.4a7.07 7.07 0 0 0-.72-2.63l-.25-.6C25.47 18.41 20.54 8.12 19 5.23 18.05 3.53 17.24 3 16 3zm.01 10.32c-2.01.02-3.18 1.51-3.18 3.42 0 1.8 1.18 4.58 2.96 7.04l.2.29.18-.24c1.73-2.38 2.9-5.06 3-6.87v-.22c0-1.9-1.17-3.4-3.16-3.42z"></path></svg>
          </div>
          <p>如何使用爱彼迎</p>
          <RightOutline fontSize={20} />
        </div>
        <div className={mesBox}>
        <QuestionCircleOutline fontSize={30} />
          <p>获取帮助</p>
          <RightOutline fontSize={20} />
        </div>
        <div className={mesBox}>
          <div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style={{display:'block',height:'24px',width:'24px',fill:'currentColor' }}aria-hidden="true" role="presentation" focusable="false"><path d="M16 1a11 11 0 0 1 10.6 8.03 6 6 0 0 1-.34 11.96 11.01 11.01 0 0 1-7.53 6.7l.2-.05a3 3 0 1 1-.26-2.01 9 9 0 0 0 6.33-8.6V12a9 9 0 0 0-18-.27V21H6a6 6 0 0 1-.6-11.97A11 11 0 0 1 16 1zm0 25a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM5 11.13l-.15.04a4 4 0 0 0 0 7.66l.15.04v-7.74zm22 0v7.74l.15-.04a4 4 0 0 0 0-7.66l-.15-.04z"></path></svg>
          </div>
          <p>
            <span>联系邻里支持团队</span>
            <span>请告诉我们您对您所在地区房屋共享活动的疑虑</span>
          </p>
          <RightOutline fontSize={20} />
        </div>

      </div>
      <hr />
      <h3><GlobalOutline /><span>简体中文(CN)</span><span>￥</span><span>CNY</span></h3>
      <div className={outBox}>

        <section>
          <button onClick={() => setVisible1(true)}>退出</button>
        </section>
        <p><u>帮助与支持</u><span>·</span><u>服务条款</u><span>·</span><u>隐私政策</u></p>
        <div>© 2023 Airbnb, Inc. All rights reserved.</div>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        showCloseButton
        onClose={() => setVisible1(false)}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '20vh',
        }}
      >
        <div className={delbox}>
          <div>确定退出登录？</div>

          <p className={bottomp}><button className={btn1} onClick={() => { setVisible1(false); }}><u>取消</u></button><button onClick={() => { setVisible1(false); handlerout() }}>确定</button></p>
        </div>

      </Popup>

    </div>
  <Bottom key={sessionStorage.getItem('token')} index={4} height={height}></Bottom>
  </div >
}
export default User